/* Copyright (c) 2012 Research In Motion Limited.
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 * http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import bb.cascades 1.0

Container {
    // File path of the bubble image
    property string bubbleImageSource: "asset:///images/bubble.png"
    // pointerOffsetX, pointerOffsetY is the position of the pixel in bubble image that should point to the location. Change these to match your pin image.
    property int pointerOffsetX: 135
    property int pointerOffsetY: 180
    // Width and Height of the pin image. Used to further offset the bubble position so that it does not overlap the pin image.
    property int pinWidth: 60
    property int pinHeight: 60
    // Width of the content area
    property int contentWidth: 439
    // Height of the content area
    property int contentHeight: 125
    // Padding of the content area i.e. the border size of the bubble.
    property int padding: 10
    ////////////////////////////////////////////////////////////////////////
    property int x: 0
    property int y: 0
    property int fontSize: 5
    property int actualX: x - pointerOffsetX
    property int actualY: y - pointerOffsetY - pinHeight
    
    // info to show
    property double lat
    property double lon
    property string name
    property string tel
    property string web

    overlapTouchPolicy: OverlapTouchPolicy.Allow
    layoutProperties: AbsoluteLayoutProperties {
        id: position
        positionX: actualX
        positionY: actualY
    }
    layout: DockLayout {
    }
    ImageView {
        imageSource: bubbleImageSource
        overlapTouchPolicy: OverlapTouchPolicy.Allow
    }
    Container {
        topPadding: padding
        leftPadding: padding
        rightPadding: padding
        preferredHeight: contentHeight
        preferredWidth: contentWidth
        maxHeight: contentHeight
        maxWidth: contentWidth
        overlapTouchPolicy: OverlapTouchPolicy.Allow
        layout: StackLayout {
            orientation: LayoutOrientation.LeftToRight
        }

        Container {
            id: leftChild
            layout: StackLayout {
                orientation: LayoutOrientation.TopToBottom
            }

            Label {
                overlapTouchPolicy: OverlapTouchPolicy.Allow
                text: qsTr("<html><strong>%1</strong></html>").arg(name)
                textStyle.color: Color.DarkGray
                textStyle.fontSizeValue: fontSize+1
                textStyle.fontSize: FontSize.PointValue
                multiline: true
                leftMargin: 0
                rightMargin: 0
                topMargin: 0
                bottomMargin: 0
                
            }
            Label {
                overlapTouchPolicy: OverlapTouchPolicy.Allow
                text: qsTr("<html><strong>Tel: </strong>%1</html>").arg(tel)
                textStyle.color: Color.White
                textStyle.fontSizeValue: fontSize
                textStyle.fontSize: FontSize.PointValue
                multiline: true
                leftMargin: 0
                rightMargin: 0
                topMargin: 0
                bottomMargin: 0
            }
            Label {
                //horizontalAlignment: HorizontalAlignment.Left
                //verticalAlignment: VerticalAlignment.Bottom
                overlapTouchPolicy: OverlapTouchPolicy.Allow
                text: qsTr("<html><strong>Capacidad: </strong>%1</html>").arg("41")
                textStyle.color: Color.White
                textStyle.fontSizeValue: fontSize
                textStyle.fontSize: FontSize.PointValue
                multiline: true
                leftMargin: 0
                rightMargin: 0
                topMargin: 0
                bottomMargin: 0
            }
            TextArea {
                textStyle.fontSizeValue: fontSize
                textStyle.fontSize: FontSize.PointValue
                text: web
                editable: false
                leftMargin: 0
                rightMargin: 0
                topMargin: 0
                bottomMargin: 0
                leftPadding: 0
                rightPadding: 0
                topPadding: 0
                bottomPadding: 0
            }

            /*Label {
                overlapTouchPolicy: OverlapTouchPolicy.Allow
                text: qsTr("<html><strong>Email: </strong>%1</html>").arg("duilio.hernandez@gmail.com")
                textStyle.color: Color.Red
                textStyle.fontSizeValue: fontSize
                textStyle.fontSize: FontSize.PointValue
                multiline: true
                leftMargin: 0
                rightMargin: 0
                topMargin: 0
                bottomMargin: 0
            }*/
        }

        Container {
            id: rightChild
            layout: StackLayout {
                orientation: LayoutDirection.TopToBottom
            }
            layoutProperties: StackLayoutProperties {
                spaceQuota: 0
            }

            Button {
                preferredWidth: 50
                horizontalAlignment: HorizontalAlignment.Right
                verticalAlignment: VerticalAlignment.Top
                overlapTouchPolicy: OverlapTouchPolicy.Allow
                imageSource: "asset:///images/phone_icon.png"

                onClicked: {
                    console.log(qsTr("Llamando a %1").arg(tel));
                    phone.requestDialpad(tel)
                }
            }
        }

    }
    animations: [
        ParallelAnimation {
            id: anim
            ScaleTransition {
                fromX: 0
                toX: 1
                fromY: 0
                toY: 1
                duration: 300
                easingCurve: StockCurve.BounceOut
            }
            FadeTransition {
                fromOpacity: 0
                toOpacity: 1
                duration: 200
            }
        }
    ]
    function play() {
        anim.play();
    }
}
